<template>
  <a-modal
    v-model:visible="visible"
    :footer="null"
    :title="$t('other.roadInfo')"
    width="90%"
    wrap-class-name="large-modal"
    :maskClosable="false"
    :confirm-loading="loading"
    :keyboard="false"
  >
    <a-spin :spinning="loading">
      <div class="route-chart-modal-container">
        <aside>
          <a-row class="moinfo-box pb-20">
            <a-col :span="24" class="mb-8">
              <div>{{$t('hangManage.makeNo')}}：</div>
              <div>{{ moInfo.moNo }} </div>
            </a-col>
            <a-col :span="24" class="mb-8">
              <div>{{$t('basicData.styleNo')}}：</div>
              <div>{{ moInfo.styleNo }} </div>
            </a-col>
            <a-col :span="24">
              <div> {{$t('basicData.styleNa') }}：</div>
              <div>{{ moInfo.styleName }} </div>
            </a-col>
          </a-row>
          <div class="px-20" v-if="isShowAdd">
            <a-button type="primary" block @click="routeAdd('add')"
              >{{$t('other.addVersion')}}</a-button
            >
          </div>
          <div class="choose-version-box">
            <div>
              <b>{{ getFieldText(versionList, roueteVersionId, "id", "name") }}</b>
              <a-dropdown trigger="click">
                <span class="text-primary change-version" v-if="isShowEdit">{{ $t('other.toggle') }}</span>
                <template #overlay>
                  <a-menu v-if="versionList.length" class="header-line-menu">
                    <a-menu-item  divided v-for="item in versionList" :key="item.id" @click="changeVersion(item.id)" >
                      <span :class="roueteVersionId == item.id ? 'text-primary' : ''">
                        {{ item.name }}
                      </span>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
            <div v-if="isShowEdit">
              <a-button type="warning1" size="small" :disabled="!versionList.length" @click="routeAdd('edit')" >{{ $t('common.editor') }}</a-button >
            </div>
          </div>
          <div class="version-box">
            <a-form :model="formState" ref="formRef" layout="vertical">
              <a-form-item :label="$t('hangManage.roadVerName')" :rules="routeRule.name"  name="name" >
                <a-input  v-model:value.trim="formState.name" disabled :placeholder="$t('common.pleaseInput')" />
              </a-form-item>
              <a-form-item  :label="$t('basicData.section')" name="section" :rules="routeRule.section" >
                <a-select :placeholder="$t('common.pleaseSelect')"  allowClear v-model:value="formState.section" disabled >
                  <a-select-option v-for="(item, index) in ['吊挂']" :key="index" :value="item" >{{ item }}</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item :label="$t('hangManage.startProcess')" name="firstProcess">
                <a-select :placeholder="$t('common.pleaseSelect')" allowClear v-model:value="formState.firstProcess" disabled  >
                  <a-select-option v-for="(item, index) in processOption" :key="index" :value="item.processDetailId" >{{ item.name }}</a-select-option >
                </a-select>
              </a-form-item>
              <a-form-item :label="$t('hangManage.endProcess')" name="lastProcess">
                <a-select
                  :placeholder="$t('common.pleaseSelect')"
                  allowClear
                  v-model:value="formState.lastProcess"
                  disabled
                >
                  <a-select-option  v-for="(item, index) in processOption" :disabled="!index" :key="index" :value="item.processDetailId" >{{ item.name }}</a-select-option >
                </a-select>
              </a-form-item>
            </a-form>
          </div>
        </aside>
        <section>
          <roadmapList
            v-if="visible"
            ref="roadmapListRef"
            :roueteVersionId="roueteVersionId"
            :moId="moId"
            :moInfo="moInfo"
            operateType="view"
            @initFormInfo="initFormInfo"
            @onProcessInfo="onProcessInfo"
          />
        </section>
      </div>
      <div class="modal-operate-btn">
        <a-button class="cancel" @click="onCancle">{{$t('common.cancel')}}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>
<script setup>
import { ref } from "vue";
import roadmapList from "./roadmapList";
import { message } from "ant-design-vue";
import axios from "@/utils/request";
import { routeRule } from "./routeChartConfig";
import { getFieldText } from "@/utils";
import { pick } from "lodash";
import i18n from '@/locales/index' 
const { t } = i18n.global
const emits = defineEmits(["operateRoute"]);
let visible = ref(false);
const loading = ref(false);
let moId = ref(null); // 制单id
let moInfo = ref({});
let roueteVersionId = ref(null);
let roadmapListRef = ref();
let versionList = ref([]); // 工艺路线图版本列表
let isShowEdit = ref(true); // 显示编辑
let isShowAdd = ref(true); // 显示新增
const formState = ref({});
let formRef = ref();
let processOption = ref([]);
const open = async (record) => {
  // console.log(record)
  visible.value = true;
  loading.value = true;
  try {
    moId.value = record.moId;
    roueteVersionId.value = record.routeId;
    isShowEdit.value = record.isShowEdit === false ? record.isShowEdit : true;
    isShowAdd.value = record.isShowAdd === false ? record.isShowAdd : true;

    await getMakeInfo(moId.value);
    await getRouteList(moId.value);
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
const changeVersion = (id) => {
  roueteVersionId.value = id;
};
const initFormInfo = async (info) => {
  // console.log("🚀 ~ file: roadmapList.vue:337 ~ initFormInfo ~ info:", info)
  let formValue = pick(info, [
    "name",
    "firstProcess",
    "lastProcess",
    "section",
  ]);
  if (!formValue.section) formValue.section = t('components.dg');
  formState.value = formValue;
};
const onProcessInfo = (data, isDelete) => {
  processOption.value = data;
  if (isDelete) {
    formState.value.firstProcess = undefined;
    formState.value.lastProcess = undefined;
  }
};
const getMakeInfo = async (id) => {
  // 制单信息
  try {
    const res = await axios.getAction("/api/mo/mo/get", { id });
    moInfo.value = res.data || {};
  } catch {
    message.warning(t('components.getDataErrorPleaseHolder'));
    moInfo.value = {};
  }
};
const getRouteList = async (id) => {
  try {
    const res = await axios.postAction("/api/mo/mo-proc-roadmap/list", {
      moId: id,
    });
    if (res.success) {
      versionList.value = res.data || [];
      if (versionList.value.length && !roueteVersionId.value)
        roueteVersionId.value = res.data[0].id;
    }
  } catch {
    message.warning(t('components.getDataErrorPleaseHolder'));
    versionList.value = [];
    roueteVersionId.value = null;
  }
};
const routeAdd = async (type) => {
  emits(
    "operateRoute",
    type,
    { moId: moId.value, routeId: roueteVersionId.value },
    true
  );
  // visible.value = false
};
const onCancle = () => {
  visible.value = false;
  if (roadmapListRef.value) {
    roadmapListRef.value.tableList = [];
    roadmapListRef.value.processId = null;
  }
  moInfo.value = {};
  roueteVersionId.value = null;
  moId.value = null;
};
defineExpose({
  open,
  onCancle,
});
</script>